<template>
	<view>
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="nav-back-icon">&lt;</text>
			</view>
			<view class="nav-title">发布活动</view>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-divider">|</text>
				<text class="nav-icon">⊙</text>
			</view>
		</view>
		
		<view class="page">
			<!-- 蓝色背景区域 -->
			<view class="blue-background"></view>
		
		<!-- 主内容容器 -->
		<view class="main-content">
			<!-- 发布活动表单 -->
			<view class="publish-form">
				<!-- 标题输入 -->
				<view class="form-item">
					<view class="form-row">
						<text class="form-label">标题:</text>
						<input class="form-input" type="text" v-model="formData.title" />
					</view>
				</view>
				
				<!-- 内容输入 -->
				<view class="form-item">
					<view class="form-row">
						<text class="form-label">内容:</text>
						<textarea class="form-textarea" v-model="formData.content"></textarea>
					</view>
				</view>
				
				<!-- 图片上传 -->
				<view class="form-item">
					<view class="form-row">
						<text class="form-label">图片/视频:</text>
						<view class="upload-container">
							<uni-section >
								<view class="example-body" style="position: relative;">
									<uni-file-picker limit="9" :list-styles="listStyles" :image-styles="imageStyles"></uni-file-picker>
								</view>
							</uni-section>
						</view>
						<view style="position: absolute;left: 250rpx;bottom: 230rpx;color: #c5c5c5;">
							点击选择上传
						</view>
					</view>
				</view>
				
				<!-- 发布按钮 -->
				
		</view>
		<view class="publish-button-container">
				<view class="publish-button" @click="handlePublish">
					<text class="publish-text">发布</text>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					title: '',
					content: ''
				},
				imageStyles: {
					width: 150,
					height: 150,
					border: {
						
					}
				},
				listStyles: {
					// 是否显示边框
					width:200,
					height:200,
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				fileLists: [{
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'uniapp-logo.png'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
				}]
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			handlePublish() {
				console.log('发布活动', this.formData);
				uni.showToast({
					title: '发布成功',
					icon: 'success'
				});
			}
		}
	}
</script>

<style>
	/* 导航栏样式 */
	.nav-bar {
		height: 120rpx;
		background: #1f78ff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		z-index: 1000;
		box-sizing: border-box;
	}

	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.nav-left:active {
		transform: scale(0.95);
	}

	.nav-back-icon {
		color: #ffffff;
		font-size: 60rpx;
		font-weight: 200;
		line-height: 1;
	}

	.nav-title {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		padding-left: 40rpx;
		flex: 1;
		text-align: center;
	}

	.nav-right {
		display: flex;
		align-items: center;
		background: rgba(1, 1, 1, 0.2);
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		gap: 16rpx;
	}

	.nav-icon {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 600;
	}

	.nav-divider {
		color: #ffffff;
		font-size: 20rpx;
		opacity: 0.8;
	}

	.page {
		background-color: #f5f6fa;
		min-height: 100vh;
		position: relative;
		padding-top: 120rpx; /* 为固定导航栏留出空间 */
	}
	
	/* 蓝色背景区域 */
	.blue-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 200rpx;
		background: linear-gradient(120deg, #1f78ff 0%, #2f89ff 100%);
	}
	
	/* 主内容容器 */
	.main-content {
		position: absolute;
		top: 20rpx; /* 调整位置，考虑导航栏高度 */
		left: 50%;
		transform: translateX(-50%);
		width: 94%;
		max-width: 750rpx;
		z-index: 10;
		padding: 20rpx 0;
	}
	
	/* 发布表单 */
	.publish-form {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
	}
	
	/* 表单项 */
	.form-item {
		margin-bottom: 40rpx;
	}
	
	.form-item:last-child {
		margin-bottom: 0;
	}
	
	/* 表单行 */
	.form-row {
		display: flex;
		align-items: flex-start;
		gap: 0;
	}
	
	/* 表单标签 */
	.form-label {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
		width: 140rpx;
		flex-shrink: 0;
		line-height: 80rpx;
		padding-right: 20rpx;
	}
	
	/* 输入框 */
	.form-input {
		flex: 1;
		height: 80rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		background: #ffffff;
		box-sizing: border-box;
	}
	
	/* 文本域 */
	.form-textarea {
		flex: 1;
		height: 200rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333333;
		background: #ffffff;
		box-sizing: border-box;
		resize: none;
	}
	
	/* 上传容器 */
	.upload-container {
		flex: 1;
	}
	
	/* 发布按钮容器 */
	.publish-button-container {
		margin-top: 60rpx;
		display: flex;
		
		justify-content: center;
	}
	
	/* 发布按钮 */
	.publish-button {
		background: #1f78ff;
		border-radius: 50rpx;
		padding: 24rpx 120rpx;
		width:250rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(31, 120, 255, 0.3);
	}
	
	.publish-text {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
	}
	
	/* uni-file-picker 样式调整 */
	.example-body {
		padding: 10rpx;
		padding-top: 0;

	}
	
	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.text {
		font-size: 14px;
		color: #333;
	}
	

</style>